<style lang='less' >
  @colorGreen:#63c5ce;
  @colorOrange:#f7931e;

  .addCouponPage{
    text-align: left;
    .title{
      color: #222;
      font-size: 14px;
      
    }
    .btnBox{
      display: inline-block;
      .btn{
        margin: 0 5px;
        padding: 10px 15px;
        font-size: 14px;
        border-radius: 4px; 
        background-color: #fff;   
        border: 1px solid #c4c4c4;
        display: inline-block;
        color: rgb(31, 55, 61);
        line-height: 1;
        text-align: center;
        &:hover{
          border-color: @colorOrange;
          color: @colorOrange;
        }
      }
      .choiced{
        border-color: @colorOrange;
        background-color: @colorOrange;
        color: #fff ;
        &:hover{
          border-color: @colorOrange;
          color: #fff;
        }
      }

    }
    .nextBtn{
      margin: 90px;
      display: block;
      padding: 10px 30px;
      border-radius: 4px;
      font-size: 14px;
      width: 200px;
      text-align: center;
      background-color: @colorGreen;
      color: #fff;
      border: 1px solid @colorGreen;
    }
   
  }

  

</style>

<template>
  <div class="addCouponPage">
    <span class="title">选择卡券类型</span>
    <div class="btnBox">

      <button class="btn" :class='{choiced:type =="raiseRates"}' @click='choiceCouponType("raiseRates")'> 加息券</button>
      <button class="btn" :class='{choiced:type =="experienceMoney"}' @click='choiceCouponType("experienceMoney")'> 体验金</button>
      <button class="btn" :class='{choiced:type =="experienceCoupon"}' @click='choiceCouponType("experienceCoupon")'> 兑换卡</button>
      <button class="btn" :class='{choiced:type =="voucherCoupon"}' @click='choiceCouponType("voucherCoupon")'> 贴息券</button>
    </div>

      <button class="nextBtn" @click='goNext'>下一步</button>

  </div>
  
</template>

<script>

    export default {
      components:{
      },
      data(){
        return{
          titleMsg:['卡券管理','卡券列表','创建卡券'],
          type:'',
        }
      },
      computed:{

      },
      watch:{
        type(val, oldV){
          if(this.type =='experienceCoupon'){
            
            this.emitStepArr(1)
          }else{
            this.emitStepArr(0)
          }
        }
      },
      methods:{
        choiceCouponType(type){
          this.type = type != this.type ? type :''
        },
        emitStepArr(arr){
          this.$emit('setStepsArr', arr)
        },
        goNext(){
          if(this.type){
            this.$router.push({
              name:this.type
            })
          }else{
            this.$alert('请选择类型')
          }
        }
      },
      created(){
        this.$emit('setTitleMsg', this.titleMsg)
        this.$emit('setStepActive', 1)
        this.emitStepArr(0)
      },
      mounted(){

      },
    }
</script>